NUXT- assets and static folder - when to use which?

Question

Being new to NUXT, I am a bit confused about the difference between the assets and static folders.

in the documentation regarding this folders it says:

every file below 1 KB will be inlined as base-64 data URL. Otherwise, the image/font will be copied in its corresponding folder (under the .nuxt directory) with a name containing a version hashes for better caching.

and also:

If you don't want to use webpacked Assets from the assets directory, you can create and use the static directory in your project root directory.

These files will be automatically served by Nuxt and accessible in your project root URL.

This option is helpful for files like robots.txt, sitemap.xml or CNAME (for like GitHub Pages).

If I understand correctly the files in the static folder should be files that their name should not change(i.e. for 3rd party consumers) and in the assets folder, files that I don't care if their name change(e.g. the files I use on my page).

Why not put all of the files in the static folder and that's it?
What is the difference between robots.txt to robots.png?
What are the best practices regarding these directories?

Thanks

Urolith

Answer 1

The content of assets folder will be process by webpack, if you use pre-processor for CSS like SASS, SCSS, or Stylus it will transform into generic CSS. Or maybe you put an image on that folder, it also will be optimized by webpack for production.

And for static folder, it just a place where you can put all of your static asset, like an image for background or slider. It never touched by webpack.

Lunneta

Why would I put the background image in the static folder and not in assets? All resources that have something to do with CSS should be touched by webpack. no? – Urolith

Not really, you can actually use both assets and static. – Lunneta

When will I want it to be touched and when not? – Urolith

@RandallFlagg sometimes you need to have files that are not necessarily used directly in the website, for example PDFs or big assets to download, video, audio, etc. Basically stuff you don't want Webpack to process. My advice is....just use assets until you find the need to use the static folder. 99% of the time you won't need to touch the static folder. – Hanuman

I'd also like to understand the best way to reference an image being used as a background but still have it processed by Webpack. Typically a background image is large and would benefit having it optimized by imagemin or something like that. – Valerio

One example of using /static and not /assets is if you are using @nuxt/image, then you have to place your images in the static folder. – Sinhalese

Answer 2

in the assets document regarding these folders it says: The assets directory contains your un-compiled assets such as Stylus or Sass files, images, or fonts.

note: The content of the assets folder will be processed by webpack, if you use a pre-processor for CSS like SASS, SCSS, or Stylus it will transform into generic CSS.

in the static document regarding these folders it says: The static directory is directly mapped to the server root () and contains files that likely won't be changed. All included files will be automatically served by Nuxt and are accessible through your project root URL.

Airway

Answer 3

Always use Static folder when dealing with videos or background images you reference in your template code or css, or Nuxt will not display it. If you try to reference a path to a video, say for a video background, and you have it in Assets, Nuxt will not display it. If you place the same video in Static and reference it like { myVideo: 'img/myvideo.mp4' } then Nuxt will display it.

Note: You need to omit the 'static' from the path, so if you have static/img/myvideo.mp4 that should always be refererenced as just /img/myvideo.mp4

Advocation